<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Workflow Editor</title>
<style>
#workflow {
  column-count: 2;
  column-gap: 20px;
}
.step {
  break-inside: avoid;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}
.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.step-actions {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
</head>
<body>
 
<div id="workflow-editor">
  <div class="step">
    <div class="step-header">
      Step 1: Start
      <div class="step-actions">
        <span>+</span>
        <span>-</span>
      </div>
    </div>
    <textarea placeholder="Action details..."></textarea>
  </div>
</div>
 
<button id="addStep">Add Step</button>
 
<script>
// Add step function
function addStep() {
  const workflowEditor = document.getElementById('workflow-editor');
  const stepCount = workflowEditor.querySelectorAll('.step').length;
  const nextStep = stepCount + 1;
 
  const newStep = document.createElement('div');
  newStep.className = 'step';
  newStep.innerHTML = `
    <div class="step-header">
      Step ${nextStep}: New
      <div class="step-actions">
        <span class="add">+</span>
        <span class="remove">-</span>
      </div>
    </div>
    <textarea placeholder="Action details..."></textarea>`;
 
  workflowEditor.appendChild(newStep);
 
  // Add event listeners to the new step
  const addButton = newStep.querySelector('.add');
  const removeButton = newStep.querySelector('.remove');
  if (addButton) {
    addButton.addEventListener('click', addStep);
  }
  if (removeButton) {
    removeButton.addEventListener('click', function() {
      this.parentNode.parentNode.remove();
    });
  }
}
 
// Add event listener to the "Add Step" button
document.getElementById('addStep').addEventListener('click', addStep);
</script>
 
</body>
</html>